<html>

<head>
    <meta charset="utf-8">
    <title>射击游戏</title>
    <meta name="description" content="毕设，双人射击游戏">
    <!-- 依赖库 -->
    <!-- <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> -->
    <!-- <script src="./js/package/aframe.min.js"></script> -->
    <!-- <script src="https://unpkg.com/aframe@1.2.0/dist/aframe.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/aframe/1.2.0/aframe.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>

    <!-- <script src="./js/package/socket.io.slim.js"></script> -->

    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <!-- <script src="https://unpkg.com/aframe-look-at-component@1.0.0/dist/aframe-look-at-component.min.js"></script> -->
    <script src="./js/package/aframe-extras.min.js"></script>
    <script src="./js/package/aframe-look-at-component.min.js"></script>

    <script src="./js/package/aframe-physics-system.js"></script>
    <!-- <script src="https://unpkg.com/aframe-event-set-component@5.0.0/dist/aframe-event-set-component.min.js"></script> -->
    <script src="./js/package/aframe-event-set-component.min.js"></script>
    <script src="./js/package/aframe-environment-component.min.js"></script>

    <!-- START -->
    <!-- 这个版本BUG，THREE.Geometry is not a constructor。注意上面那个aframe-physics-system本地包会一直更新 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/aframe-physics-system@4.0.1/dist/aframe-physics-system.min.js"></script> -->
    <!-- 参见 -->
    <!-- https://github.com/n5ro/aframe-physics-system/issues/187 -->
    <!-- https://github.com/gearcoded/aframe-physics-system/blob/master/dist/aframe-physics-system.js -->
    <!-- END -->
    <!-- <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> -->
    <script src="./js/package/dayjs.min.js"></script>

    <!-- 工具 -->
    <script src="./js/utils/utils.js"></script>
    <!-- 全局变量 -->
    <script src="./js/variables.js"></script>

    <!-- 组件 -->
    <!-- 通用组件 -->
    <script src="./js/component/random-color.component.js"></script>
    <script src="./js/component/random-position.component.js"></script>
    <script src="./js/component/random-size.component.js"></script>
    <script src="./js/component/remove-in-seconds.component.js"></script>
    <script src="./js/component/drop-down.component.js"></script>
    <script src="./js/component/random-score.component.js"></script>
    <script src="./js/component/spawn-in-circle.component.js"></script>
    <script src="./js/component/fixed-position.component.js"></script>
    <!-- 专用组件 -->
    <script src="./js/objects/character.objects.js"></script>
    <script src="./js/objects/forward.objects.js"></script>
    <script src="./js/objects/gun.objects.js"></script>
    <script src="./js/objects/battle-button.objects.js"></script>
    <script src="./js/objects/balloon-gun.objects.js"></script>
    <script src="./js/objects/portal.objects.js"></script>
    <!-- 控制组件 -->
    <script src="./js/controller/shoot-game.controller.js"></script>

    <!--CSS  -->
    <link rel="stylesheet" href="./css/index-style.css" />

</head>

<body>
    <a-scene id="index-scene" networked-scene="room: shooter;debug: true;" physics="gravity:0;">
        <a-assets>
            <a-asset-item id="scoreboard" src="./assets/models/objects/scoreboard.glb"></a-asset-item>
            <!-- <img id="grid" src="https://img.gs/bbdkhfbzkk/stretch/https://i.imgur.com/25P1geh.png"
                crossorigin="anonymous">
            <img id="sky" src="https://img.gs/bbdkhfbzkk/2048x2048,stretch/https://i.imgur.com/WqlqEkq.jpg"
                crossorigin="anonymous" /> -->
            <img id="ground" src="./assets/images/floor-perfect.jpg">
            <img id="pavement" src="./assets/images/maze/pavement.jpg" />
            <img id="boxTexture" src="./assets/images/wrapTexture.png">
            <a-asset-item id="avatar" src="./assets/models/objects/amongus_1.glb"></a-asset-item>

            <a-assets-item id="mountain" src="./assets/models/scene/glass_mountain/scene-2.glb"></a-assets-item>
            <a-assets-item id="cookie" src="./assets/models/scene/cookie.glb"></a-assets-item>
            <a-assets-item id="portal_4" src="./assets/models/scene/portal_4.glb"></a-assets-item>
            <a-assets-item id="ufo" src="./assets/models/objects/ufo/ufo6.glb"></a-assets-item>

            <!-- Templates -->

            <!-- Avatar -->
            <template id="avatar-template">
                <a-entity class="avatar" >
                    <a-entity scale="0.5 0.5 0.5">
                        <a-sphere class="head" scale="0.45 0.5 0.4"></a-sphere>
                        <a-entity class="face" position="0 0.05 0">
                            <a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                            </a-sphere>
                            <a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                                <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                            </a-sphere>
                        </a-entity>
                        <a-entity class="avatarId" text="value: userId;side:double;height:10;width:10;align:center"
                            position="0 1 0" rotation="0 180 0"></a-entity>
                    </a-entity>
                    <a-gltf-model src="#avatar" rotation="0 -90 0" scale="2 2 2" position="0 -1.2 0"></a-gltf-model>
                </a-entity>
            </template>

            <!-- balloon-handler -->
            <template id="balloon-handler-template">
                <a-entity class="avatar">
                    <a-sphere class="head" scale="0.45 0.5 0.4"></a-sphere>
                    <a-entity class="face" position="0 0.05 0">
                        <a-sphere class="eye" color="#efefef" position="0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                            <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                        </a-sphere>
                        <a-sphere class="eye" color="#efefef" position="-0.16 0.1 -0.35" scale="0.12 0.12 0.12">
                            <a-sphere class="pupil" color="#000" position="0 0 -1" scale="0.2 0.2 0.2"></a-sphere>
                        </a-sphere>
                    </a-entity>
                    <a-entity class="gun">
                        <a-box position="0.51 -0.13 -0.29" scale="0.19 0.23 0.67" color="#000"></a-box>
                        <a-entity class="gun-tip" position="0.51 -0.10 -0.64"></a-entity>
                    </a-entity>
                </a-entity>
            </template>
            <!-- balloon-gun -->
            <template id="balloon-gun-template">
                <a-entity class="balloon-gun">
                    <a-entity class="balloon" geometry="primitive: sphere; radius: 2" remove-in-seconds="20"
                        random-color>
                    </a-entity>
                    <!-- <a-entity class="tag" geometry="primitive: box; width: 10;height: 10;depth:10;"
                        material="color:#FF0000;opacity:0.5"></a-entity> -->
                </a-entity>
            </template>

            <!-- Bullet -->
            <template id="bullet-template">
                <a-entity>
                    <a-sphere class="bullet" radius="0.2" color="#fff" static-body remove-in-seconds="10">
                    </a-sphere>
                </a-entity>
            </template>

            <!-- 分数相关信息 -->
            <!-- 左边记分板 -->
            <template id="info-left-template">
                <a-entity scale="10 10 10" rotation="0 90 0" id="leftBoard" position="4 10 9.7">
                    <a-entity id="id_left" text="value:id_left;align: center; height:3; width: 3" position="0 0.1 0">
                    </a-entity>
                    <a-entity id="score_left" text="value:0;align: center;height: 3; width: 3" position="0 -0.3 0">
                    </a-entity>
                </a-entity>
            </template>
            <!-- 右边记分板 -->
            <template id="info-right-template">
                <a-entity scale="10 10 10" rotation="0 90 0" id="leftBoard" position="4 10 -10">
                    <a-entity id="id_right" text="value:id_right;align: center;; height: 5; width: 5"
                        position="0 0.1 0"></a-entity>
                    <a-entity id="score_right" text="value:0;align: center;height: 5; width: 5" position="0 -0.3 0">
                    </a-entity>
                </a-entity>
            </template>

            <!-- Battle Button -->
            <template id="battle-button-template">
                <a-entity position="18 1.6 4" class="battle-button" battle-button
                    animation__scale="property: scale; to: 1.5 1.5 1.5; easing: easeInCubic;startEvents: scaleUp"
                    animation__shrink="property: scale; to: 1 1 1; easing: easeInCubic;startEvents: animationcomplete__scale"
                    animation__colorful="property: material.color; to: #FF0000; easing: easeInCubic;startEvents: setAnimatedColor"
                    animation__plain="property: material.color; to: #00AAFF; easing: easeInCubic;startEvents: animationcomplete__colorful"
                    material="color:#00AAFF" geometry="primitive: box; width: 1; height: 1; depth: 1"
                    dynamic-body="linearDamping:1;angularDamping:1">
                    <!-- ballte-button指示牌 -->
                    <a-entity class="battleButtonSlogan"
                        text="value: Shoot to start Game;side:double;height:40;width:40;align:center" position="0 4 0"
                        rotation="0 180 0" look-at="#player"></a-entity>
                </a-entity>
            </template>
            <!-- /Templates -->
        </a-assets>

        <div id="blocker">
            <div id="instructions">
                <div class="description">
                    <span>这是一款射击气球游戏。需要至少两个玩家方能启动游戏</span>
                    <span>满两个玩家到场后,按空格射击场景中的battle button即开始对战</span>
                </div>
                <h2 class="scene-load-counter">5</h2>
                <span class="main-instruction">Click to play</span>
                <span>Move: WS</span>
                <span>Shoot: SPACE</span>
                <span>Look: AD</span>
                <span>Quit: ESC</span>
            </div>
        </div>
        <!-- 消息提示框 -->
        <div id="finishDialog" class="message" style="display: none;">
            <div class="message-body">
                <h4 id="shootGameRes">你赢了，你输了</h4>
            </div>
        </div>

        <!-- Ground -->
        <a-box static-body width="100" height="0.2" depth="100" position="0 -0.3 0" color="#52A257"></a-box>
        <!-- 垫底，辅助功能的地面 -->
        <a-box static-body width="100" height="0.2" depth="100" position="0 -2 0" color="#52A257"></a-box>

        <!-- <a-plane material="src: #pavement; repeat: 200 200" rotation="-90 0 0" height="400" width="400">
        </a-plane> -->
        <!-- 记分板 -->
        <!-- 静态模型 -->
        <a-entity>
            <!-- 静态标题 -->
            <!-- <a-text value="Scoreboard" text="width: 10; height: 10; side: double" scale="8 8 1" rotation="0 90 0"
                position="3.91995 16.39763 10.11278" look-at="#player"></a-text> -->
            <!-- 静态标语 -->
            <a-entity rotation="0 90 0" position="0.63241 15 1.80303" look-at="#player">
                <a-text value="Battle!" text="width: 10; height: 10; side: double; align: center" scale="20 20 1">
                </a-text>
            </a-entity>
            <!-- 用户信息和分数值 -->
            <a-entity look-at="#player" scale="10 10 10" rotation="0 90 0" id="leftBoard" position="4 10 9.7">
                <a-entity id="id_left" text="value:id_left;align: center;; height: 3; width: 3;side: double"
                    position="0 0.1 0">
                </a-entity>
                <a-entity id="score_left" text="value:0;align: center;height: 5; width: 5;side: double"
                    position="0 -0.3 0">
                </a-entity>
            </a-entity>
            <a-entity look-at="#player" scale="10 10 10" rotation="0 90 0" id="leftBoard" position="4 10 -10">
                <a-entity id="id_right" text="value:id_right;align: center;; height: 3; width: 3;side: double"
                    position="0 0.1 0">
                </a-entity>
                <a-entity id="score_right" text="value:0;align: center;height: 5; width: 5;side: double"
                    position="0 -0.3 0">
                </a-entity>
            </a-entity>
        </a-entity>

        <!-- 气球 -->
        <a-entity balloon-gun="balloonGunTemplate:#balloon-gun-template"></a-entity>

        <!-- 人物 -->
        <!-- <a-entity id="player" kinematic-body networked="template:#avatar-template;attachTemplateToLocal:false;" camera
            fixed-position character  look-controls="pointerLockEnabled:false"
            >
            <a-cursor></a-cursor>
            <a-sphere class="head" visible="false" random-color gun="bulletTemplate:#bullet-template"></a-sphere>
            <a-entity class="avatarId"></a-entity>
        </a-entity> -->
        <a-entity id="player"  position="0 1.6 0" kinematic-body networked="template:#avatar-template;attachTemplateToLocal:false;" camera
            character fixed-position  random-position="centerPoint:0 1.6 20">
            <a-cursor></a-cursor>
            <a-sphere class="head" visible="false" random-color gun="bulletTemplate:#bullet-template"></a-sphere>
            <a-entity class="avatarId"></a-entity>
            <a-entity id="rig" position="0 -1.6 0" >
                <a-camera id="camera" wasd-controls-enabled="false" look-controls-enabled="false"  ></a-camera>
            </a-entity>
        </a-entity>

        <!-- Battle Button -->
        <a-entity networked="template:#battle-button-template;attachTemplateToLocal:false;"></a-entity>

        <!-- 传送门 -->
        <a-entity class="portal" position="18 0 20">
            <a-box position="0 5 0" static-body color="tomato" scale="10 15 10"></a-box>

            <!-- 传送门指示牌 -->
            <a-entity class="mazeSlogan" text="value: Go to Shootgame;side:double;height:60;width:60;align:center"
                position="0 15 0" look-at="#player"></a-entity>
            <!-- 传送门模型 -->
            <a-box scale="1 2 1" src="#boxTexture" position="0 2 0" width="2.6" height="4" depth="0.5"
                portal="url:index.html" static-body class="portalWrapper">
            </a-box>
            <a-gltf-model src="#portal_4"
                animation__position="property: object3D.position.y; to: 1.6; dir: alternate; dur: 2000; loop: true">
            </a-gltf-model>
        </a-entity>


        <!-- 整体环境 -->
        <a-entity environment="preset: forest; groundColor: #3b3b3f; groundTexture: walkernoise; dressingColor: #b38d3d"
            visible="">
            <a-entity class="environment" position="0 50 0"
                light="type: hemisphere; color: #91dacf; intensity: 0.6; groundColor: #3b3b3f" visible=""></a-entity>
            <a-entity class="environment" position="-1.2 0.88 -0.55"
                light="intensity: 0.6; shadowCameraLeft: -10; shadowCameraBottom: -10; shadowCameraRight: 10; shadowCameraTop: 10"
                visible=""></a-entity>
            <a-entity rotation="-90 0 0" class="environmentGround environment" visible="" scale="1 1 4.18"
                shadow="cast: false; receive: false"></a-entity>
            <a-entity class="environmentDressing environment" visible=""></a-entity>
            <a-sky radius="200" theta-length="110" class="environment"
                material="shader: gradientshader; topColor: #24b59f; bottomColor: #eff9b7" visible="" geometry="">
            </a-sky>
        </a-entity>

        <!-- 其他装饰物 -->
        <!-- 金字塔 -->
        <a-gltf-model src="#mountain" scale="5 5 5" position="60 0 0" static-body></a-gltf-model>
        <!-- 甜甜圈,不能用，阻碍范围太大 -->
        <!-- <a-gltf-model src="#cookie" scale="50 50 50" position="0 0 0" static-body></a-gltf-model> -->
        <a-gltf-model src="#ufo" position="20 30 0" rotation="-45 -45 45" scale="5 5 5" static-body></a-gltf-model>


    </a-scene>



    <!-- 同步 -->
    <script src="./js/sync/avatar.sync.js"></script>
    <script src="./js/sync/battle-button.sync.js"></script>
    <script src="./js/sync/balloon-handler.sync.js"></script>
    <script src="./js/sync/bullet.sync.js"></script>
    <script src="./js/sync/balloon-gun.sync.js"></script>
    <!-- 事件 -->
    <script src="./js/events/shoot-game.events.js"></script>
    <!-- 订阅 -->
    <script src="./js/subscribe/scoreboard.subscribe.js"></script>
    <script src="./js/subscribe/shoot-game-result.subscribe.js"></script>
    <script src="./js/subscribe/battle-button.subscribe.js"></script>
    <script>
        // showMessage_shootGame();
    </script>
</body>

</html>